<template>
  <div class="wenshu">
    <div class="title">文书概览</div>
    <div class="con">
      <div class="zhonglei">
        <div class="title">文书种类</div>
        <div class="zu">
          <div>
            <div>{{zhonglei.bilu}}</div>
            <div>现场笔录</div>
          </div>
          <div>
            <div>{{zhonglei.weisheng}}</div>
            <div>
              卫生监督
              <br />意见书
            </div>
          </div>
          <div>
            <div>{{zhonglei.zeling}}</div>
            <div>
              责令改正
              <br />通知书
            </div>
          </div>
          <div>
            <div>{{zhonglei.dangchang}}</div>
            <div>
              当场行政处罚
              <br />决定书
            </div>
          </div>
        </div>
      </div>
      <div class="tongji">
        <div class="title">按专业统计</div>
        <div id="zhuanye">加载中</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getWenShuData, getWenShuData2 } from "../../api/gengduo";
export default {
  name: "WenShu",
  data() {
    return {
      zhonglei: {
        bilu: "加载中",
        weisheng: "加载中",
        zeling: "加载中",
        dangchang: "加载中"
      },
      zhuanyeArr: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
    };
  },
  methods: {
    async getData() {
      // try {
      var json = (await getWenShuData()).data.data;
      var json2 = (await getWenShuData2()).data.data;
      // } catch (error) {
      // var json = {
      //   supervisionTotal: 7556,
      //   instructTotal: 2171,
      //   penaltyTotal: 595,
      //   recordTotal: 33727
      // };

      // var json2 = [
      //   {
      //     total: 13199,
      //     code: "01",
      //     name: "公共场所"
      //   },
      //   {
      //     total: 1784,
      //     code: "02",
      //     name: "生活饮用水"
      //   },
      //   {
      //     total: 57,
      //     code: "03",
      //     name: "职业卫生"
      //   },
      //   {
      //     total: 1219,
      //     code: "04",
      //     name: "放射诊疗"
      //   },
      //   {
      //     total: 2783,
      //     code: "05",
      //     name: "学校卫生"
      //   },
      //   {
      //     total: 12129,
      //     code: "06",
      //     name: "医疗卫生"
      //   },
      //   {
      //     total: 402,
      //     code: "0701",
      //     name: "消毒产品单位"
      //   },
      //   {
      //     total: 12190,
      //     code: "0703",
      //     name: "传染病防治"
      //   },
      //   {
      //     total: 71,
      //     code: "0704",
      //     name: "餐饮具集中消毒单位"
      //   },
      //   {
      //     total: 4,
      //     code: "08",
      //     name: "血液安全"
      //   },
      //   {
      //     total: 202,
      //     code: "09",
      //     name: "计划生育"
      //   }
      // ];
      // }

      this.zhonglei = {
        bilu: json.recordTotal,
        weisheng: json.penaltyTotal,
        zeling: json.instructTotal,
        dangchang: json.supervisionTotal
      };

      let newjson2 = [];

      json2.forEach((val, index) => {
        let str = "";
        if (val.name === "生活饮用水") {
          val.name = "饮用水";
        } else if (val.name === "消毒产品单位") {
          val.name = "消毒产品";
        } else if (val.name === "餐饮具集中消毒单位") {
          val.name = "餐饮具";
        }
        newjson2.push({
          value: val.total,
          name: val.name
        });
      });

      this.zhuanyeArr = newjson2;
      setTimeout(() => {
        this.zhuanye = this.suiji("zhuanye");
      }, 0);
    },
    init() {},
    suiji(id) {
      let json = this.zhuanyeArr;
      let zong = 0;
      for (let item of json) {
        zong += item.value;
      }

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      let m2R2Data = this.zhuanyeArr;
      let option = {
        color: [
          "#4460a1",
          "#c45eb1",
          "#f9674e",
          "#a7bc2f",
          "#54a24c",
          "#4f9f86",
          "#4088ff",
          "#6559d7",
          "#f2c335",
          "#fd6e12",
          "#0eb4f0"
        ],
        title: [
          {
            text: ["{a|共计}", "{b|" + zong + "}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 14,
                  lineHeight: 30
                },
                b: {
                  color: "#fff",
                  fontSize: 26,
                  lineHeight: 30
                }
              }
            },
            textAlign: "center",
            x: "37%",
            y: "32%"
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: "0",
          top: "center",
          itemGap: 3,
          icon: "circle",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["38%", "50%"],
            radius: ["46%", "60%"],
            startAngle: 300,
            minShowLabelAngle: 5,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: "{c}",
                fontSize: 12
              }
            },
            data: m2R2Data,
            labelLine: {
              normal: {
                length: 5,
                length2: 5
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      // myChart.resize();
      return myChart;
    }
  },
  mounted() {
    this.init();
  },
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.zhuanye.resize();
    });
  }
};
</script>

<style scoped lang="less">
.wenshu {
  margin-bottom: 1rem;
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;

  & > .title {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
    background: linear-gradient(to right, #253664, #04163e, #253664);
  }

  .con {
    display: flex;
    height: 86%;

    .zhonglei {
      padding: 0 1rem;
      width: 60%;

      .title {
        color: #07ccff;
        font-size: 1.1rem;
        line-height: 3em;
      }

      .zu {
        height: 78%;
        display: flex;

        & > div {
          flex: 1;
          margin-right: 0.5rem;

          &:last-of-type {
            margin-right: 0;
          }

          & > div {
            color: #fff;
            border: 1px dashed #4f5a88;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &:nth-of-type(1) {
              font-size: 1.4rem;
              height: 77%;
              padding: 1rem;
              background: url("../../assets/wenshu.png") no-repeat center center;
              background-clip: content-box;
              background-size: 100% 70%;
              margin-bottom: 3%;
            }

            &:nth-of-type(2) {
              text-align: center;
              height: 20%;
            }
          }
        }
      }
    }

    .tongji {
      width: 40%;
      padding: 0 1rem;

      .title {
        color: #07ccff;
        font-size: 1.1rem;
        line-height: 3em;
      }

      #zhuanye {
        height: 78%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(120deg, #155799, #159957);
        background-size: 200% 100%;
        background-clip: text;
        color: transparent;
        animation: bgp 3s infinite linear;
      }
    }
  }
}
</style>